<script lang="ts" setup>
import { ref } from "vue";
import { goPage } from "../../utils";
const show = ref(true);
//3秒后跳转
setTimeout(() => {
  show.value = false;
  goPage("/pages/layout/index", "redirectTo");
}, 3000);
const joy = ref("/static/room.png");
</script>

<template>
  <view class="launch">
    <view class="background-image">
      <wd-img :src="joy" width="100%" height="100%" mode="aspectFill" />
    </view>
    <view class="content animate-in">
      <view>木木搭</view>
      <view class="sub-content">Mumuda</view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.launch {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  position: relative;

  // 背景图片容器
  .background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  // 文字内容
  .content {
    position: absolute;
    z-index: 2;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 100rpx;
    color: #fff;
    font-weight: bold;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); // 添加文字阴影增强可读性
    width: 500rpx;
    // 添加左侧渐入动画
    &.animate-in {
      animation: fadeInFromLeft 1.2s ease-out forwards;
    }

    .sub-content {
      font-size: 40rpx;
      color: #fff;
    }

  }

  // 定义从左侧渐入的动画
  @keyframes fadeInFromLeft {
    0% {
      opacity: 0;
      transform: translate(-150%, -50%); // 初始位置在左侧
    }

    100% {
      opacity: 1;
      transform: translate(-50%, -50%); // 最终位置居中
    }
  }
}
</style>